<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 18px">
      <el-breadcrumb-item :to="{ path: '/' }">商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider ></el-divider>
      <!--用户列表-->
      <div style="float: right;position: relative;margin-bottom: 20px">
        <el-input placeholder="请输入用户名" v-model="usernameSearch">
          <el-button slot="append" icon="el-icon-search" @click="userSearch()" style="color: #0095d7">
            搜索
          </el-button>
        </el-input>
      </div>
      <!--添加用户信息-->
      <div style="margin-left: 20px">
        <el-button type="primary" icon="el-icon-user-solid" @click="allUser()">
          全部商品
        </el-button>
      </div>

      <el-table
                :data="productArr"
                style="width: 100%;margin:0 20px 20px 20px" border>
        <el-table-column type="index" label="" width="50" align="center"></el-table-column>
        <el-table-column prop="id" label="编号" width="100" align="center"></el-table-column>
        <el-table-column prop="name" label="商品名称" align="center"></el-table-column>
        <el-table-column prop="mfrs" label="供应商" align="center"></el-table-column>
        <el-table-column prop="standard" label="规格" align="center"></el-table-column>
        <el-table-column prop="inventory" label="库存" align="center"></el-table-column>
        <el-table-column prop="modified" label="更新时间" align="center"></el-table-column>
        <el-table-column label="是否启用" width="80" align="center">
          <template slot-scope="scope">
            <el-switch
                @change="changeEnable(scope.row)"
                v-model="scope.row.enable"
                :active-value="1"
                :inactive-value="0"
                active-color="#13ce66"
                inactive-color="#AAAAAA">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="socpe">
            <el-button
                size="mini"
                @click="userUpdate(socpe.row)"
                type="success" >修改
            </el-button>
            <el-popconfirm
                title="您确定删除此用户吗?"
                @confirm="userDelete(socpe.$index, socpe.row)"
            >
              <el-button
                  slot="reference" size="mini"
                         type="danger">删除
              </el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!--用户列表结束-->
  </div>
</template>

<script>

export default {
  data() {
    return {
      /*用户数组*/
      productArr: [],
      /*用户名查询*/
      usernameSearch: "",


    };
  },
  methods: {
    loadAllProductInfo(){
      let url = 'http://localhost:8080/products';
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response)=>{
        this.productArr = response.data.data;
      })
    },
    changeEnable(user) {
      let enableText = ['禁用', '启用'];
      let url = 'http://localhost:8080/users/' + user.id;
      if (user.enable == 1) {
        url += '/enable';
      } else {
        url += '/disable';
      }

      this.axios.post(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          let message = '将管理员【' + user.username + '】的启用状态改为【' + enableText[user.enable] + '】成功！';
          this.$message({
            message: message,
            type: 'success'
          });
        } else {
          this.$message.error(responseBody.message);
        }
        if (responseBody.state == 40400) {
          this.showAllUserInfo();
        }
      });
    },

    allUser() {
      location.href="/sys-admin/temp/user/list"
    },
    /*用户查找*/
    userSearch(currentPage, pageSize) {
      currentPage = currentPage ? currentPage : this.now;
      pageSize = pageSize ? pageSize : this.size;
      if (this.usernameSearch == '') {
        this.$message.error("用户名不能为空");
        return;
      }
      let url = 'http://localhost:8080/users/search?username=' + this.usernameSearch +
          '&page=' + currentPage + '&size=' + pageSize;
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response)=> {
        this.userArr = response.data.data;
        this.usernameSearch = "";
        this.total = this.userArr.length;
      })
    },
    /*用户删除*/
    userDelete(key, user) {
      let url = 'http://localhost:8080/users/'+user.id+'/deleteById'
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .post(url).then((response)=>{
        if (response.data.state==20000){
          this.$message.success("删除成功");
          location.reload();
        }else {
          this.$message.error("删除失败");
          this.showAllUserInfo();
        }
      })
    },
    /*用户管理之修改用户信息*/
    userUpdate(user) {
      location.href = "/sys-admin/temp/user/list/update?id=" + user.id;
    },
    /*用户添加*/
    userInsert() {
      location.href = "/sys-admin/temp/user/list/add-new"
    },
    },
  mounted() {
    this.loadAllProductInfo();
  }
}
</script>